<template>
  <div id="home">
    <header>
      <!-- 下拉菜单 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <van-search v-model="seachval" placeholder="请输入搜索关键词" @focus="search" />
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-saoyisao"></use>
      </svg>
    </header>
    <main>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="blue">
        <van-swipe-item>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg5.duote.com%2Fduoteimg%2Fdtnew_newsup_img%2F202005%2F20200511154614_67221.jpg&refer=http%3A%2F%2Fimg5.duote.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667275820&t=4442883bb7f11601b02e4a8c3edd7c4c"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.book118.com%2Fsr1%2FM00%2F15%2F3A%2FwKh2Al5pVhiIYRZ5AAGWXZexDfkAAiOoQHhJ3gAAZZ1667.jpg&refer=http%3A%2F%2Fimg.book118.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667275885&t=585331301989e0df37886a148d9f89da"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>

      <van-grid :column-num="4">
        <van-grid-item
          v-for="(item, index) in piclist"
          icon="photo-o"
          :key="index"
          :text="item.menu_text"
          :to="item.path"
        />
      </van-grid>

      <div class="nav">
        <div class="left">
          <div class="top">
           新人礼包
          </div>
          <div class="buttom">
            <p>勤洗手 勤消毒</p>
            <span style="font-size: 12px; color: hotpink">75%酒精免洗</span>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/1.jpg" alt="">
        </div>
      </div>

      <div class="title">
        <h3>新闻资讯</h3>
        <span>更多></span>
      </div>
      
      <ul>
        <li class="lis" v-for="item in list[0]" :key="item._id">
          <div>
            <van-tag round type="danger">新闻</van-tag>
            <span class="custom-title">{{ item.productName }}</span>
          </div>
          <p style="font-size: 10px">{{ item.productName }}</p>
        </li>
      </ul>
      


    </main>
    <footer>
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="wap-home-o">战役</van-tabbar-item>
        <van-tabbar-item name="circle" icon="location-o" @click="circle">圈子</van-tabbar-item>
        <van-tabbar-item name="melancholy" icon="add-o"  @click="melancholy">寻医</van-tabbar-item>
        <van-tabbar-item name="news" icon="chat-o"  @click="news">消息</van-tabbar-item>
        <van-tabbar-item name="mine" icon="smile-o"  @click="mine">我的</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>


<script>
import * as api from '@/api/login'
export default {
  data() {
    return {
      //控制底部选中样式
      active: 'home',
      value1: 0,
      seachval: '',
      option1: [
        { text: '北京市', value: 0 },
        { text: '南京市', value: 1 },
        { text: '马鞍山市', value: 2 },
      ],
      //菜单字段
      piclist: [
        {
          id:1,
          menu_text: '疾病百科',
          path:"/encyclopedia"
        },
        {
          id:2,
          menu_text: '防疫商城',
          path:"/shop"
        },
        {
          id:3,
          menu_text: '防疫知识',
          path:"/knowledge"
        },
        {
          id:4,
          menu_text: '全部分类',
        },
      ],
      list: [],
      
    }
  },
  created() {
    // 异步更新数据
    api.getProductApi().then((res) => {
      console.log(res)
      // 加载状态结束
      this.list.push(res.data.data)
    })
  },
  methods:{
    search(){
    this.$router.push("/search")
   },
   circle(){
    this.$router.push("/circle")
   },
   melancholy(){
    this.$router.push("/melancholy")
   },
   news(){
    this.$router.push("/news")
   },
   mine(){
    this.$router.push("/mine")
   }
  }
}
</script>




<style lang="less" scoped>
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
#home {
  box-sizing: border-box;
  margin-left: 15px;
  width: 348px;
  display: flex;
  height: 100%;
  flex-direction: column;

  header {
    box-sizing: border-box;
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    van-search {
      border-radius: 10px;
      width: 222px;
      height: 27px;
      line-height: 20px;
    }
    .icon {
      font-size: 26px;
    }
  }
  footer {
    width: 100%;
    height: 60px;
  
          .van-hairline--top-bottom{
            .van-tabbar-item{
              font-size: 16px;
            }
          }
  }
  main {
    flex: 1;
    box-sizing: border-box;
    // overflow: hidden;
    // background-color: green;
    //菜单轮播图样式
    .my-swipe .van-swipe-item {
      border-radius: 10px;
      color: #fff;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      box-sizing: border-box;
      //   background-color: #39a9ed;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .nav {
      width: 100%;
      height: 170px;
      display: flex;

      .left {
        width: 166px;
        height: 170px;
        // background-color: red;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .top {
          width: 166px;
          height: 82px;
          background-color: red;
        }
        .buttom {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          border-radius: 5px;
          width: 166px;
          height: 82px;
          background-color: #d6f9f0;
        }
      }
      .right {
        box-sizing: border-box;
        width: 166px;
        height: 165px;
        margin-left: 10px;
        background-color: green;
        img {
          text-align: center;
      width: 166px;
          height: 165px;
        }
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
    .lis {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 60px;
      div {
        span {
          box-sizing: border-box;
          margin-left: 20px;
        }
      }
      p {
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        line-height: 1;
        margin-top: 5px;
        padding-left: 20px;
      }
    }
  }
}
</style>